<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>表单验证实验</title>
		<script src="js/jquery.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<script type="text/javascript">
			function checkSid() {
				sidvalue = document.getElementById("studentid").value; //取得学号
				regExp = /^[0-9]{9}$/; // 正则表达式
				if (!regExp.test(sidvalue)) {
					alert("学号格式不对!");
					return false;
				} else {
					return true;
				}
			}

			function checkSname() {
				sname = document.getElementById("sname").value; //取得姓名
				regExp = /^[\u4e00-\u9fa5]{2,7}$/; // 正则表达式
				if (!regExp.test(sname)) {
					document.getElementById("snametip").innerHTML = "姓名不合法!";
					document.getElementById("snametip").style = "color:red;font-size:10px"
					return false;
				} else {
					document.getElementById("snametip").innerHTML = "";
					return true;
				}
			}
			
			function checkMobile(){
				mobile = document.getElementById("mobile").value; //取得姓名
				regExp = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9]|19[0|1|2|3|5|6|7|8|9])\d{8}$/; // 正则表达式
				if (!regExp.test(mobile)) {
					document.getElementById("mobiletip").innerHTML = "手机号不合法!";
					document.getElementById("mobiletip").style = "color:red;font-size:10px"
					return false;
				} else {
					document.getElementById("mobiletip").innerHTML = "";
					return true;
				}
			}
			
			function checkSalary(){
				salary = document.getElementById("salary").value; //取得姓名
				regExp = /^(([1-9][0-9]*)|((([1-9][0-9]*)|0)\.[0-9]{1,2}))$/; // 正则表达式
				if (!regExp.test(salary)) {
					document.getElementById("salarytip").innerHTML = "薪资不合理!";
					document.getElementById("salarytip").style = "color:red;font-size:10px"
					return false;
				} else {
					document.getElementById("salarytip").innerHTML = "";
					return true;
				}
			}
			function checkAll(){
				flag1=checkSid();
				flag2=checkSname();
				flag3=checkMobile();
				flag4=checkSalary()
				return flag1&&flag2&&flag3&&flag4
			}
		</script>
	</head>
	<body>
		<div class="center-block" style="width: 50%;">
			学号<input onblur="checkSid()" class="form-control" type="text" id="studentid"><br>
			姓名<input onblur="checkSname()" class="form-control" type="text" id="sname"><span id="snametip"></span><br>
			手机<input onblur="checkMobile()" class="form-control" type="text" id="mobile"><span id="mobiletip"></span><br>
			薪资<input onblur="checkSalary()" class="form-control" type="text" id="salary"><span id="salarytip"></span><br>
			<button onclick="checkAll()" class="btn btn-primary btn-block" type="button">添加学生</button>
		</div>
	</body>
</html>
